<script lang="ts" setup>
import { defineAsyncComponent, markRaw, onMounted, ref } from 'vue'
import IconActive from '@/components/icons/IconActive.vue';
import IconArticle from '@/components/icons/IconArticle.vue';
import IconClassmateAlbum from '@/components/icons/IconClassmateAlbum.vue';
import IconJob from '@/components/icons/IconJob.vue';
import IconMoney from '@/components/icons/IconMoney.vue';
import IconScholarship from '@/components/icons/IconScholarship.vue';
import LayoutHeader from '@/components/LayoutHeader.vue';
import { ArrowRight } from '@element-plus/icons-vue';
import type { TabPaneName } from 'element-plus'

import { adminRouter } from '@/router/adminRouter';

// 定义数组：页面组件列表，动态加载
const componentMap = ref<any[]>([
])


onMounted(async () => {
  //更具路由配置，动态加载页面组件
  adminRouter.map((item) => {
    componentMap.value.push({
      name: item.path,
      title: item.meta?.title,
      component: item.component
    })
  })
})

// --------------------------------- 菜单 ---------------------------------
// 当前选中的菜单
const currentMenu = ref<string>('')
// 菜单选中事件
const handleMenuSelect = (index: string) => {
  currentMenu.value = index
  addTab(index)
}

// --------------------------------- 选项卡 ---------------------------------
const pageTabs = ref<{ title: string, name: string, content: any }[]>([])

const addTab = (targetName: string) => {
  // 如果已经存在，则不添加
  if (pageTabs.value.find((tab) => tab.name === targetName)) {
    return
  }
  const newTab = componentMap.value.find((tab) => tab.name === targetName)
  pageTabs.value.push({
    title: newTab!.title as string,
    name: targetName,
    content: markRaw(newTab!.component as any)
  })
}
const removeTab = (targetName: TabPaneName) => {
  const tabs = pageTabs.value
  let activeName = currentMenu.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }
  currentMenu.value = activeName
  pageTabs.value = tabs.filter((tab) => tab.name !== targetName)
}
</script>

<template>
  <div class="layout">
    <header class="px-2">
      <LayoutHeader />
    </header>
    <aside>
      <el-scrollbar>
        <el-menu class="my-menus" :default-active="currentMenu" @select="handleMenuSelect">

          <el-menu-item index="ClassmateAlbum">
            <template #title>
              <el-icon>
                <IconClassmateAlbum />
              </el-icon>
              <span>同学录</span>
            </template>
          </el-menu-item>

          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <IconActive />
              </el-icon>
              <span>校友活动</span>
            </template>
            <el-menu-item index="AlumniActivityAdd">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>新增活动</span>
              </template>
            </el-menu-item>
            <el-menu-item index="AlumniActivityList">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>查看活动</span>
              </template>
            </el-menu-item>
          </el-sub-menu>

          <!-- 捐赠钱物 -->
          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <IconMoney />
              </el-icon>
              <span>捐赠钱物</span>
            </template>
            <el-menu-item index="5-3">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>捐赠排行榜</span>
              </template>
            </el-menu-item>
            <el-menu-item index="5-2">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>我的捐赠</span>
              </template>
            </el-menu-item>
          </el-sub-menu>

          <!-- 招聘信息 -->
          <el-sub-menu index="6">
            <template #title>
              <el-icon>
                <IconJob />
              </el-icon>
              <span>招聘信息</span>
            </template>
            <el-menu-item index="6-1">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>发布招聘</span>
              </template>
            </el-menu-item>
            <el-menu-item index="6-2">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>查看招聘</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <!-- 文章 -->
          <el-sub-menu index="7">
            <template #title>
              <el-icon>
                <IconArticle />
              </el-icon>
              <span>文章</span>
            </template>
            <el-menu-item index="7-1">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>发布文章</span>
              </template>
            </el-menu-item>
            <el-menu-item index="7-2">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>我的发布</span>
              </template>
            </el-menu-item>
          </el-sub-menu>

          <!-- 奖助学金 -->
          <el-sub-menu index="8">
            <template #title>
              <el-icon>
                <IconScholarship />
              </el-icon>
              <span>奖助学金</span>
            </template>
            <el-menu-item index="8-1">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>发起赞助</span>
              </template>
            </el-menu-item>
            <el-menu-item index="8-2">
              <template #title>
                <el-icon>
                  <ArrowRight />
                </el-icon>
                <span>我的助学</span>
              </template>
            </el-menu-item>
          </el-sub-menu>


        </el-menu>
      </el-scrollbar>
    </aside>
    <main>
      <!-- <router-view></router-view> -->
      <!-- 选项卡导航 -->
      <el-tabs v-model="currentMenu" type="card" class="demo-tabs" closable @tab-remove="removeTab">
        <el-tab-pane v-for="item in pageTabs" :key="item.name" :label="item.title" :name="item.name">
          <!-- {{ item.content }} -->
          <component :is="item.content" />
          <el-scrollbar>
            <div class="w-100 h-100 pb-3 px-4">
              <div class="p-3 bg-white"></div>
              <component :is="item.content" />
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.layout {
  display: grid;
  grid-template: 60px 1fr / 200px 1fr;
  height: 100vh;
  overflow: hidden;
}

header {
  background-color: #23262E;
  grid-column: span 2;
}

aside {
  background-color: #282B33;
  overflow: auto;

  // 菜单配置
  :deep(.el-menu) {
    background-color: unset;
    border: 0;

    .el-sub-menu__title {
      background-color: #393D49 !important;
      color: #fff !important;
    }

    .el-menu-item {
      background-color: #242831 !important;
      color: #fff !important;

      &:hover {
        background-color: #545c64 !important;
        color: #fff !important;
      }

      &.is-active {
        background-color: #0480df !important;
        color: #fff !important;
      }
    }
  }
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
